<template>
    <div>
        <van-nav-bar
            title="登录页面"
        />
      <van-form @submit="onSubmit">
        <van-field
            v-model="data.username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[
            { required: true, message: '请填写用户名' },
            {pattern : /^\w{5,}$/,message: '用户名至少5位'}
            ]"
        />
        <van-field
            v-model="data.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {pattern : /^\w{5,}$/,message: '密码至少5位'}
             ]"
        />
        <div style="margin: 16px;">
            <van-button id="buton" round block type="info" native-type="submit">登录</van-button>
        </div>
        </van-form>
    </div>
</template>

<script>
// import login from "@/utils/login"
import { loginApi } from "@/api/FindRoom"
import {setItem,key} from "@/utils/storage"
export default {
    props: {

    },
    data() {
        return {
            data:{
username:"",
            password:"",
            },
            token: "",
        };
    },
    components: {

    },
    methods: {
        async onSubmit() {
            try {
                const list = await loginApi(this.data)
                // console.log(list);
                
                setItem(key,list.body.token)
                setItem("USERNAME",this.username)
                this.$router.push("/layoutAndaxios/head")
            } catch (e) {
                console.log(e);
            }
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
};
</script>

<style scoped >
.van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    font-weight: 500;
    font-size: 4.26667vw;
    color: #fff !important;
}
.van-nav-bar {
    background-color: #21b97a;
}
#buton {
    background-color: #21b97a;
    border: #21b97a;
}
</style>
